<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test page :: with selects, but without JQuery</title>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
      #status {line-height: 10px;}
  </style>
  <script type="text/javascript">
      function scheduleFillTextArea() {
        setTimeout(fillTextArea, 150);
      }

      function fillTextArea() {
        document.getElementById('text-area').innerHTML = 'This is text area';
      }

      let changedCounter = 0;
      function onUsernameChanged(input) {
        changedCounter++;
        document.getElementById('username-mirror').innerHTML = input.value + ' (' + changedCounter + ')';
      }

      let blurCounter = 0;
      function onUsernameBlur() {
        blurCounter++;
        document.getElementById('username-blur-counter').innerHTML = "blur: " + blurCounter;
      }

      function initBlur() {
        document.getElementById('username-blur-counter').innerHTML = '___';
      }

      function onDomainChanged(select) {
        document.getElementById('selectedDomain').innerHTML = select.options[select.selectedIndex].text;
      }

      function listenRightClick(id) {
        document.getElementById(id).addEventListener('contextmenu', function(e) {
          e.preventDefault();
          document.getElementById('username-mirror').innerText = 'Right click (#' + id + ')';
          return false;
        }, false);
      }

      function initRightClick() {
        listenRightClick('login')
        listenRightClick('domain')
      }
  </script>
</head>
<body onload="initBlur(); scheduleFillTextArea(); initRightClick();">
<div style="display: none">abcd</div>
<div id="non-clickable-element"
     style="z-index: -100; position: absolute; top: 10px; right: 200px; width: 190px; height: 50px; background-color: lightgrey;">
  <a href="https://google.com">non-clickable element</a>
</div>
<div id="clickable-element"
     style="z-index: -90; position: absolute; top: 10px; right: 200px; width: 190px; height: 50px; background-color: lightgrey;">
  <a href="https://duckduckgo.com">clickable element</a>
</div>

<h1>Page with selects</h1>


<div class="container">
  <div class="container">
    <div id="domain-container" class="container">
      <h2>Dropdown list</h2>
      <h6 id="selectedDomain"></h6>
      <div id="dropdown-list-container" class="container">
        <select id="domain" name="domain" onchange="onDomainChanged(this);">
          <option value="one.io" data-mailServerId="111">@one.io</option>
          <option value="two.eu" data-mailServerId="222A">@two.eu</option>
          <option value="three.com" data-mailServerId="33333B">@three.com</option>
          <option value="four.ee" data-mailServerId="111АБВГД">@four.ee</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div id="apostrophes-and-quotes" class="container">
  <h2><a href="#">Options with 'apostrophes' and "quotes"</a></h2>
  <select id="hero">
    <option value="">-- Select your hero --</option>
    <option value="john mc'lain">John Mc'Lain</option>
    <option value='arnold "schwarzenegger"'>Arnold "Schwarzenegger"</option>
    <option value="mickey rourke">Mickey "Rock'n'Roll" Rourke</option>
    <option id="denzel-washington" value='denzel "equalizer" washington'>Denzel Washington</option>
  </select>
  <blockquote id="hero-greeting"></blockquote>
</div>

<div id="radioButtons">
  <h2>Radio buttons</h2>
  <input type="radio" name="me" value="master">Мастер</input>
  <input type="radio" name="me" value="margarita">Маргарита</input>
  <input type="radio" name="me" value="cat">Кот "Бегемот"</input>
  <input type="radio" name="me" value="woland">Theodor Woland</input>
</div>

<br/>
<br/>

<table id="multirowTable" class="table multirow_table" border="1">
  <tbody>
  <tr id="multirowTableFirstRow">
    <td class="first_row">Chack</td>
    <td>Norris</td>
  </tr>
  <tr id="multirowTableSecondRow">
    <td class="second_row">Chack</td>
    <td id="baskerville"><span></span> L'a&#32;&#x20;
      &nbsp;&NonBreakingSpace;&#160;&#xA0;
      &#x1680;&#5760;
      &ensp;&#x2002;&#8194;
      &emsp;&#x2003;&#8195;
      &numsp;&#x2007;&#8199;
      &#8239;&#x202F;
      &NoBreak;&#x2060;&#8288;
      &#x2000;&#8192;
      &#x2001;&#8193;
      &#x2004;&emsp13;&#8196;
      &#x2005;&emsp14;&#8197;
      &#x2006;&#8198;
      &puncsp;&#x2008;&#8200;
      &thinsp;&ThinSpace;&#x2009;&#8201;
      &VeryThinSpace;&#x200A;&#8202;
      &#x200B;
      &#x200C;
      &zwj;&#x200d;&#8205;
      &MediumSpace;&#x205F;&#8287;
      &#x3000;&#12288;
      Baskerville
    </td>
  </tr>
  </tbody>
</table>

<div id="status">
  Username: <span class="name">Bob Smith</span>&nbsp;Last login: <span class="last-login">01.01.1970</span>
</div>

<input id="zopa"/>
<div id="theHiddenElement" style="display: none">Видишь суслика? И я не вижу. <b>А он есть</b>!</div>

<br/>
<div style="width: 400px">
  <form action="#submitted-form" method="post">
    <fieldset title="Login form">
      <label> Username:
        <input name="username" value="" readonly="readonly"/>
      </label> <br/>
      <label>Password:
        <input name="password" value="" maxlength="24"/>
      </label> <br/>
      <input type="checkbox" name="rememberMe">Remember me<br/><br/>
      <input type="checkbox" name="invisibleCheckbox" style="display: none">Invisible<br/><br/>
      <textarea id="text-area" rows="1" cols="60"></textarea>
      <textarea id="empty-text-area" rows="1" cols="1"></textarea>
      <input id="age" name="age" value="18"/>
      <input id="login" type="submit" value="Log in"/>
      <input id="logout" type="submit" value="Log out" disabled/>
    </fieldset>
  </form>
</div>

<table id="user-table">
  <thead>
  <tr>
    <th style="font-size:24px;">First name</th>
    <th>Last name</th>
    <th>Age</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="firstname">Bob</td>
    <td class="lastname">Dilan</td>
    <td class="age">25</td>
  </tr>
  <tr>
    <td class="firstname">John</td>
    <td class="lastname">Smith</td>
    <td class="age">28</td>
  </tr>
  </tbody>
</table>

<a href="long_ajax_request.html" id="ajax-button">Want to see ajax in action?</a>

<h1>Now typing: </h1>
<h3 id="username-mirror">_</h3>
<span id="username-blur-counter">_</span>
<div style="width: 400px">
  <form>
    <fieldset title="Login form">
      <label> Username:
        <input id="username" name="username" value="" onchange="onUsernameChanged(this);" onblur="onUsernameBlur();"/>
      </label> <br/>
      <input id="password" name="password" type="password"/>
    </fieldset>
  </form>
</div>

<div id="greetings">
  <div class="level1">
    <span class="hello1">Hi       world</span>
  </div>
  <div class="level2">
    <span id="hello-world" class="hello2">Hello&nbsp;world</span>
  </div>
  <div class="level3">
    <span class="hello3">Hello&nbsp;world</span>
  </div>
</div>

<div style="display: none;"
     id="gopher"
     class="invisible-with-multiple-attributes"
     data-animal-id="111"
     onClick="void(0);"
     onChange="console.log(this);"
     placeholder="Животное"
     ng-class="widget"
     ng-click="none">Суслик
</div>

<div id="empty" class="container">
  <h3><a href="#">Select with an empty default option</a></h3>
  <select id="gender">
    <option value=""></option>
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
</div>

<div class="container" id="cars-container">
  <label for="cars">Choose your cars:</label>
  <br/>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="zhiguli" disabled>Zhiguli</option>
    <option value="lada" disabled>Lada</option>
  </select>
  <blockquote id="cars-greeting"></blockquote>
</div>

<div test-attribute="test-value" class="top-container-class">
  <div test-attribute="test-value" id="ancestor" class="container-class">
    <div>
      <div id="first-div">First div element</div>
      <div id="second-div">Second div element</div>
    </div>
  </div>
</div>

<select name="emptySelect" id="empty-select">
</select>

<div class="container">
  <h2><a href="#">Disabled select</a></h2>
  <select id="disabled-select" disabled>
    <option value="">-- Select the frozen --</option>
    <option value="elsa">Elsa</option>
    <option value="anna">Anna</option>
  </select>
  <button id="unfreeze-me">Unfreeze me</button>
</div>

<script>
  document.getElementById('unfreeze-me').addEventListener('click', () => {
    setTimeout(() => {
      document.getElementById('disabled-select').removeAttribute('disabled')
    }, 200)
  })

  document.getElementById('apostrophes-and-quotes').addEventListener('change', (e) => {
    document.getElementById('hero-greeting').textContent = e.target.value && `Yes, ${e.target.value} is my hero!`
  })

  const cars = document.getElementById('cars');
  document.getElementById('cars-container').addEventListener('input', () => {
    const greeting = Array.from(cars.selectedOptions).map(option => option.value).join(' & ')
    document.getElementById('cars-greeting').textContent = greeting && `Yes, ${greeting} are my favorite cars!`
  })
</script>

<div id="container"></div>

<script type="text/javascript">
  const delay = 50;
  setTimeout(function() {document.getElementById('container').innerHTML = '<div id="dynamic-content-container"></div>';}, delay);
  setTimeout(function() {document.getElementById('dynamic-content-container').innerHTML = '<span id="dynamic-content">dynamic content</span>';}, delay*2);
  setTimeout(function() {document.getElementById('dynamic-content-container').innerHTML += '<span id="dynamic-content2">dynamic content2</span>';}, delay*3);
</script>

</body>
</html>
